<template>
  <el-popover
    placement="bottom-end"
    :width="350"
    trigger="click"
    popper-class="notification-popover"
    @show="handlePopoverShow"
  >
    <template #reference>
      <el-badge :value="unreadCount" :max="99" class="notice-badge">
        <el-tooltip content="消息通知" placement="bottom">
          <el-icon class="action-icon" :class="{ 'has-news': unreadCount > 0 }">
            <Bell />
          </el-icon>
        </el-tooltip>
      </el-badge>
    </template>

    <div class="notification-panel">
      <div class="panel-header">
        <span class="title">通知中心</span>
        <el-button link type="primary" @click="readAll">全部已读</el-button>
      </div>

      <el-tabs v-model="activeTab" class="notification-tabs">
        <el-tab-pane label="通知" name="notice">
          <el-scrollbar height="300px">
            <div v-if="notifications.length" class="notification-list">
              <div
                v-for="item in notifications"
                :key="item.id"
                class="notification-item"
                :class="{ unread: !item.read }"
                @click="handleNotificationClick(item)"
              >
                <el-icon class="item-icon" :class="item.type">
                  <component :is="getIconByType(item.type)" />
                </el-icon>
                <div class="item-content">
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-desc">{{ item.content }}</div>
                  <div class="item-time">{{ formatTime(item.time) }}</div>
                </div>
                <el-icon v-if="!item.read" class="unread-dot">
                  <Plus />
                </el-icon>
              </div>
            </div>
            <el-empty v-else description="暂无通知" />
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="消息" name="message">
          <el-scrollbar height="300px">
            <div v-if="messages.length" class="notification-list">
              <div
                v-for="item in messages"
                :key="item.id"
                class="notification-item"
                :class="{ unread: !item.read }"
                @click="handleMessageClick(item)"
              >
                <el-avatar :size="32" :src="item.avatar" />
                <div class="item-content">
                  <div class="item-title">{{ item.from }}</div>
                  <div class="item-desc">{{ item.content }}</div>
                  <div class="item-time">{{ formatTime(item.time) }}</div>
                </div>
                <el-icon v-if="!item.read" class="unread-dot">
                  <Plus />
                </el-icon>
              </div>
            </div>
            <el-empty v-else description="暂无消息" />
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>

      <div class="panel-footer">
        <el-button type="primary" link @click="viewMore">
          查看更多
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  Bell,
  ChatDotRound,
  WarningFilled,
  CircleCheckFilled,
  InfoFilled,
  Plus,
  ArrowRight 
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import { useRouter } from 'vue-router'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const router = useRouter()

// 模拟数据
const notifications = ref([
  {
    id: 1,
    type: 'success',
    title: '任务完成',
    content: '部署任务已成功完成',
    time: new Date().getTime() - 1000 * 60 * 5,
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '系统警告',
    content: '系统存储空间不足，请及时处理',
    time: new Date().getTime() - 1000 * 60 * 30,
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '系统更新',
    content: '系统将在今晚进行例行维护更新',
    time: new Date().getTime() - 1000 * 60 * 60 * 2,
    read: true
  }
])

const messages = ref([
  {
    id: 1,
    from: '张三',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '新订单待处理，请查看',
    time: new Date().getTime() - 1000 * 60 * 10,
    read: false
  },
  {
    id: 2,
    from: '李四',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '库存预警，请及时补货',
    time: new Date().getTime() - 1000 * 60 * 45,
    read: false
  }
])

const activeTab = ref<string>('notice')
const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.read).length +
         messages.value.filter(m => !m.read).length
})

const getIconByType = (type: string) => {
  const iconMap: Record<string, any> = {
    success: CircleCheckFilled,
    warning: WarningFilled,
    info: InfoFilled,
    message: ChatDotRound
  }
  return iconMap[type] || InfoFilled
}

const formatTime = (time: number) => {
  return dayjs(time).fromNow()
}

const handleNotificationClick = (item: any) => {
  item.read = true
}

const handleMessageClick = (item: any) => {
  item.read = true
}

const readAll = () => {
  if (activeTab.value === 'notice') {
    notifications.value.forEach(item => item.read = true)
  } else {
    messages.value.forEach(item => item.read = true)
  }
}

const viewMore = () => {
  router.push('/notification/index')
}

const handlePopoverShow = () => {
  // 可以在这里加载最新的通知数据
}
</script>

<style scoped lang="scss">
.notification-panel {
  .panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .notification-tabs {
    :deep(.el-tabs__header) {
      margin: 0;
      padding: 0 16px;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .notification-list {
    .notification-item {
      padding: 12px 16px;
      display: flex;
      align-items: flex-start;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      &.unread {
        background-color: #ecf5ff;
      }

      .item-icon {
        font-size: 20px;
        margin-right: 12px;
        margin-top: 2px;
        transition: all 0.3s;

        &.success { 
          color: #67c23a;
          background: rgba(103, 194, 58, 0.1);
          padding: 8px;
          border-radius: 50%;
        }
        &.warning { 
          color: #e6a23c;
          background: rgba(230, 162, 60, 0.1);
          padding: 8px;
          border-radius: 50%;
        }
        &.info { 
          color: #909399;
          background: rgba(144, 147, 153, 0.1);
          padding: 8px;
          border-radius: 50%;
        }
      }

      .el-avatar {
        margin-right: 12px;
      }

      .item-content {
        flex: 1;
        min-width: 0;

        .item-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 6px;
          transition: all 0.3s;
        }

        .item-desc {
          font-size: 13px;
          color: #606266;
          margin-bottom: 6px;
          line-height: 1.5;
        }

        .item-time {
          font-size: 12px;
          color: #909399;
        }
      }

      .unread-dot {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        color: #409eff;
        font-size: 8px;
        opacity: 0.8;
        transition: all 0.3s;
        
        &:hover {
          opacity: 1;
          transform: translateY(-50%) rotate(225deg);
        }
      }
    }
  }

  .panel-footer {
    padding: 12px 16px;
    border-top: 1px solid #ebeef5;
    text-align: center;
    
    .el-button {
      font-size: 13px;
      
      .el-icon {
        font-size: 14px;
        transition: all 0.3s;
      }
      
      &:hover {
        .el-icon {
          transform: translateX(4px);
        }
      }
    }
  }
}

.action-icon {
  &.has-news {
    animation: bell-shake 1s ease infinite;
  }
}

@keyframes bell-shake {
  0% { transform: rotate(0); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(7deg); }
  80% { transform: rotate(-7deg); }
  100% { transform: rotate(0); }
}
</style>

<style>
.notification-popover {
  padding: 0;
  margin: 0;
}
</style> 